<template>
    <div>
    <el-row>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model="queryForm.name" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getListCar(queryForm)">查询</el-button>
          <el-button @click="resetCarQuery">重置</el-button>
          <el-button type="primary" plain @click="openAddCarDialog">添加</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column prop="loginName" label="名称"/>
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.gender == 'M'">男</el-tag>
            <el-tag type="success" v-else-if="scope.row.gender == 'F'">女</el-tag>
            <el-tag v-else>-</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="生日">
          <template slot-scope="scope">{{ switchToDate(scope.row.birthday) || '-' }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="电话">
          <template slot-scope="scope">{{ scope.row.phone || '-' }}</template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
          <template slot-scope="scope">{{ scope.row.email || '-' }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">{{ scope.row.status || '-' }}</template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
            <el-button @click="handleDel(scope.row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background    
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4,5,6,7]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" 
        style="margin-top: 30px;"/>
    </el-row>

    <el-dialog :visible.sync="AdminDialogVisible" width="400px" :title="mode=='edit'?'编辑活动管理员':'添加活动管理员'" @closed="handleClose">
      <el-form :model="adminForm" label-position="left" label-width="60px">
          <el-form-item label="姓名" prop="loginName">
              <el-input v-model="adminForm.loginName"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
              <el-input v-model="adminForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
              <el-input v-model="adminForm.email"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="adminForm.birthday"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="adminForm.gender" placeholder="请选择">
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item>
          <el-button @click="cancelAddDialog">取消</el-button>
          <el-button type="primary" @click="confirmSubmitAdmin(adminForm)">确定</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  </template>
  
<script>
  import { listAdmin , addAdmin , editAdmin, removeAdmin } from '@/api/root';
  import { toDate } from '@/util/date';
  import { Message, MessageBox } from 'element-ui';
  export default {
    data(){
      return{
        AdminDialogVisible: false,
        mode:'add',
        currentPage:undefined,
        total:undefined,
        queryForm:{
          name:'',
          pageNum: 1,
          pageSize: 5
        },
        sexOptions:[
          {label:'男',value:'M'},
          {label:'女',value:'F'},
        ],
        adminForm:{},
        tableData:[{
          loginName:'用户1',
          gender:"F",
          birthday:'2019-10-14',
          phone:'14679855462',
          email:'wwz@gmail.cn',
          status:1,
        }]
      }
    },
    methods:{
      getListAdmin(){
        listAdmin(this.queryForm).then(res=>{
          console.log(1,res);
          this.tableData = res.row
        }).catch(()=>{})
      },
      resetCarQuery(){},
      openAddCarDialog(){
        this.mode = 'add'
        this.AdminDialogVisible = true

      },
      handleDel(data){
        MessageBox.alert(`确定要删除活动管理员<${data.loginName}>吗?`).then(()=>{
          removeAdmin(data.id).then(res=>{
            Message.success(res.msg)
            this.getListAdmin()
          }).catch(()=>{})
        }).catch(()=>{})
      },
      handleEdit(data){
        this.AdminDialogVisible = true
        this.mode = 'edit'
        this.adminForm = JSON.parse(JSON.stringify(data))
      },
      handleOpen(){},
      handleClose(){},
      cancelAddDialog(){
        this.AdminDialogVisible = false
        this.adminForm={}
      },
      confirmSubmitAdmin(data){
        if(this.mode == 'add'){
          addAdmin(data).then(res=>{
            Message.success(res.msg)
            this.AdminDialogVisible = false
            this.adminForm = {}
            this.getListAdmin()
          }).catch(()=>{})
        }else if(this.mode == 'edit'){
          editAdmin(data).then(res=>{
            Message.success(res.msg)
            this.AdminDialogVisible = false
            this.adminForm = {}
            this.getListAdmin()
          }).catch(()=>{})
        }
      },
      switchToDate(str){
        return toDate(str)
      },
      handleSizeChange(size){
        this.queryForm.pageSize=size
        this.getListAdmin(this.queryForm)
      },
      handleCurrentChange(page){
        this.queryForm.pageNum=page
        this.getListAdmin(this.queryForm)
      },
    },
    created(){
      this.getListAdmin()
    }
  }
  </script>
  
  <style>
  
  </style>

